<template>
    <view :class="direction=='horizontal'?'horizontal':'vertical'">
        <view class="tabs-pane-container">
            <scroll-view :scroll-x="direction=='horizontal'" :scroll-y="direction=='vertical'" :scroll-left="scrollLeft" :scroll-top="scrollTop" scroll-with-animation>
                <view class="tabs-pane-content">
                    <view  v-for="(v,i) in category" :key="i" class="item" :class="{'active':v[paneKeyName]==modelValue}" @click="handleClick(i)">
                        <view :class="{'active':v.paneKey==modelValue}">{{v[titleName]}}</view>
                        <view class="active-line" v-if="v[paneKeyName]==modelValue"></view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onReady} from '@dcloudio/uni-app';
import {getCurrentInstance,ref,computed,watch} from "vue";
const props = defineProps({
    //绑定数据
    modelValue: {
        type: String,
        default: "-1"
    },
    //商品列表
    category:{
        type:Array,
        require:true,
    },
    //是否加载中
    loading:{
        type:Boolean,
        default: false,
    },
    direction:{
        type:String,
        default:"horizontal",
    },      
    paneKeyName:{
        type:String,
        default:"paneKey",
    },
    titleName:{
        type:String,
        default:"title",
    }
})
//x偏移量
const scrollLeft = computed(() => {
    let index = props.category?.findIndex((item:any)=>{
        return props.modelValue == item.paneKey
    })
    let count = 0;
    for (let i = 0; i < index - 1; i++) {
        count += itemContainer.value[i].width
    };
    return count;
})
//y偏移量
const scrollTop = computed(() => {
    let index = props.category?.findIndex((item:any)=>{
        return props.modelValue == item.paneKey
    })
    let count = 0;
    for (let i = 0; i < index - 1; i++) {
        count += itemContainer.value[i].top
    };
    return count;
})
//容器宽度
const itemContainer = ref<any>([]);
const emit = defineEmits(["update:modelValue", "change"])
//设置宽度
const setWidth = ()=> {
    const query = uni.createSelectorQuery().in(getCurrentInstance());
        //拿到个item宽高
    query.selectAll('.item').boundingClientRect(data => {
        itemContainer.value = data
    }).exec()
};
//出现点击事件
const handleClick = (i:number)=>{
    if(props.loading) return;
    emit("change",i);
}
onReady(()=>{
    setWidth();
})
</script>
<style lang="less" scoped>
.horizontal{
    .tabs-pane-container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: #fff;
        height: 90rpx;
        line-height: 90rpx;
        .tabs-pane-content{
            display: flex;
            .item{
                position: relative;
                min-width: 100rpx;
                padding: 0 20rpx;
                flex: 1 0 auto;
                color: #666;
                font-size: 30rpx !important;
                text-align: center;
                .active{
                    color: #FC3247;
                    font-weight: 600;
                }
                .active-line{
                    position: absolute;
                    left: 50%;
                    transform: translate(-50%);
                    bottom: 0;
                    content: " ";
                    width: 80rpx;
                    height: 6rpx;
                    background: #FC3247;
                }
            }
        }
    }
}
.vertical{
    .tabs-pane-container{
        width: 100%;
        text-align: center;
        background: #fff;
        .tabs-pane-content{
            .item{
                width: auto;
                height: 110rpx;
                line-height: 110rpx;
                padding: 0 10px 0 15px;
                color: #666;
            }
            .active{
                font-weight: 600;
                color: #FC3247;
                background: #f7f7f7;
            }
        }
    }
}
</style>